import { CockpitChartBaseProps } from "../helps";
import React from "react";

export interface KxInvestmentAmountPieChart extends CockpitChartBaseProps {
  img?: any;
}
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";
import { parseMoney } from "../utils/parseMoney";

export const KxInvestmentCategoryAmountPieChart = ({
  dataSource = [],
}: KxInvestmentAmountPieChart): EChartsOption => {
  const total = dataSource.reduce((memo, cur) => {
    return memo + (cur.amount || 0);
  }, 0);
  const nameMap = dataSource.reduce<Record<string, number>>((memo, cur) => {
    if (cur.name) {
      memo[cur.name] = cur.amount || 0;
    }

    return memo;
  }, {});

  return {
    legend: {
      show: true,
      icon: "circle",

      top: "middle",

      left: "43%",
      data: dataSource.map((d) => d.name || ""),
      width: 40,
      padding: [0, 16],
      itemGap: 33,
      itemWidth: 9,
      formatter: function (name) {
        return (
          "{title|" +
          name +
          "}     {value|" +
          parseMoney(nameMap[name], 2, true, false) +
          "万元}"
        );
      },

      textStyle: {
        rich: {
          title: {
            fontSize: 14,
            width: 201,
            color: "#FDFFFF",
            fontFamily: "Source Han Sans CN",
          },
          value: {
            fontSize: 14,
            color: "#FDFFFF",
            fontFamily: "Arial",
            align: "right",
          },
        },
      },
    },
    color: ["#FFC832", "#FF6F36", "#02EABC"],
    xAxis: [
      {
        show: false,
      },
    ],
    series: dataSource.reduce<any[]>((memo, cur, currentIndex) => {
      memo.push({
        name: "",
        type: "pie",
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: [85 - currentIndex * 15 + "%", 80 - currentIndex * 15 + "%"],
        center: ["18%", "53%"],
        label: {
          show: false,
        },
        itemStyle: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          borderWidth: 5,
        },
        data: [
          {
            value: cur.amount,
            name: cur.name,
          },
          {
            value: total - (cur.amount || 0),
            name: "",
            itemStyle: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0,
            },
            tooltip: {
              show: false,
            },
            hoverAnimation: false,
          },
        ],
      });

      return memo;
    }, []),
  };
};

const KxInvestmentAmountPieChart = ({
  reactEChartsProps,
  dataSource,
}: KxInvestmentAmountPieChart) => {
  return (
    <ReactECharts
      {...reactEChartsProps}
      style={{
        height: "169px",
      }}
      option={KxInvestmentCategoryAmountPieChart({
        dataSource,
      })}
    />
  );
};

export default KxInvestmentAmountPieChart;
